<template>
    <div class="personalContainer">
        <div class="personal">
            <div class="PersonalLeft">
                <img src="https://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png">
                <div @click="toPersonalDetailed">
                    <p>用户名{{$store.state.user.info.id}}</p>
                    <span>普通用户</span>
                </div>
            </div>
            <div class="PersonalRight">
                <van-icon class="QRcode" name="qr" />
                <span>开通VIP</span>
            </div>
        </div>
        <h2 class="title">我的资产</h2>
        <ul class="list">
            <li>
                <p class="count">￥0</p>
                <p class="text">余额</p>
            </li>
            <li>
                <p class="count">0</p>
                <p class="text">红包</p>
            </li>
            <li>
                <p class="count">0</p>
                <p class="text">优惠券</p>
            </li>
            <li>
                <p class="count">0</p>
                <p class="text">积分</p>
            </li>
            <li>
                <p class="count">0</p>
                <p class="text">礼品卡</p>
            </li>
        </ul>
        <van-grid :column-num="3" class="buttomList">
          <van-grid-item icon="bill-o" text="我的订单" />
          <van-grid-item icon="manager-o" text="账号管理" />
          <van-grid-item icon="phone-o" text="我的手机号" />
          <van-grid-item icon="calendar-o" text="周六一起拼" />
          <van-grid-item icon="smile-comment-o" text="售后服务" />
          <van-grid-item icon="balance-list-o" text="邀请返利" />
          <van-grid-item icon="bag-o" text="优先购" />
          <van-grid-item icon="gold-coin-o" text="积分中心" />
          <van-grid-item icon="vip-card-o" text="会员俱乐部" />
          <van-grid-item icon="location-o" text="地址管理" />
          <van-grid-item icon="passed" text="支付安全" />
          <van-grid-item icon="service-o" text="帮助与客服" />
          <van-grid-item icon="comment-o" text="意见反馈" />
          <van-grid-item icon="balance-o" text="我的竞拍" />
        </van-grid>
        <TabBar />
    </div>  
</template>

<script>

import TabBar from '../../components/tabBar'
  export default {
    name:'Personal',
    components: {TabBar},
    methods:{
       toPersonalDetailed(){
        this.$router.push('/personaldetailed')
       }
    }
  }
</script>

<style lang="less" scoped>
.personalContainer{
    .personal{
        background-image: url(https://yanxuan.nosdn.127.net/5905098f74e04c39fa5e76ebb9ff591b.png?imageView&type=webp);
        background-size: 100%;
        float: left;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .PersonalLeft{
            display: flex;
            padding: 32px 0;
            width: 5.4rem;
            margin-left: .3rem;
            line-height: 1;
            overflow: hidden;
            img{
                vertical-align: middle;
                width: 1.42rem;
                height: 1.42rem;
                border-radius: 50%;
            }
            div p{
                color: #fff;
                font-size: .36rem;
                line-height: 1.2;
                text-align: left;
                margin-bottom: .1rem;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                margin-left: .3rem;
            }
            div span{
                color: #fff;
                font-size: .28rem;
                vertical-align: middle;
                margin-left: .3rem;
            }
        }
    }
    .title{
        margin-left: .3rem;
        border-bottom: .01rem solid #D9D9D9;
        text-align: left;
        line-height: 1.04rem;
        font-size: .28rem;
    }
    .list{
        display: flex;
        font-size: 12px;
        align-items: center;
        justify-content: space-evenly;
        li .count{
            text-align:center;
            font-weight: bold;
        }
    }
    button{
        width: 100%;
        height: 1.23rem;
        line-height: 1.19rem;    
        border: 1px solid #fff;
        background-color: #fff;
        color: #333;
        font-size: .28rem;
        text-align: center;
    }
}
</style>